<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="/css/newStyle.css"
	th:href="@{/css/newStyle.css}">
<link href="../junior/css/bootstrap.css" rel="stylesheet" />
<link href="../junior/css/Multiselect/style.css" rel="stylesheet" />
<link href="../junior/css/jquery.Jcrop.min.css" rel="stylesheet" />
<script src="../junior/js/jquery-3.2.1.min.js"></script>
<script src="../junior/js/bootstrap.js"></script>
<script src="../junior/js/multiselect.min.js"></script>
<script src="../junior/js/jquery.Jcrop.min.js"></script>
    <script type="text/javascript">
        $(function($) {

            $('#video').Jcrop();

        });

</script>

</head>
<body>
	<!-- 返回上一级提交表单 -->
	<form id="returnBack" action="check" method="post">
		<input type="hidden" th:value="${junior.byzxdm}" name="byzxdm" /> <input
			type="hidden" th:value="${junior.byzxmc}" name="byzxmc" /> <input
			th:text="${sfzh}" th:value="${sfzh}" id="sfzh" hidden="hidden" />
		<!--<input type="hidden" th:value="${zkw.userid}" name="userid" />
	<input type="hidden" th:value="${zkw.username}" name="username" /> -->
	</form>
	<div class="mainBox">
		<div class="mainBox_inner">
			<h1>凉山州中考信息管理系统(初级中学)</h1>

			<!--  <form id="form1" method="post" action=""> --> 
				<div class="container">
					<div class="clearfix" style="margin-bottom: 20px;"></div>

					<div class="row" style="text-align: right; margin-bottom: 20px;">
						<div class="col-xs-6 col-md-6 text-left">
							<span th:text="${junior.byzxmc}+' '"></span>
						</div>
						<div class="col-xs-6 col-md-6 text-right">
							<a href="JavaScript:void(0);"
								onclick="$('#returnBack').submit();">返回上级</a> <a href="logout">安全退出</a>
						</div>
					</div>
					<div class="row">
						<hr
							style="height: 2px; border: none; border-top: 2px solid #185598;" />
					</div>

					<div class="row">
						<div class="col-xs-4" th:object="${studentlist}">
							<div class="row">
								<div class="input-group">
									<span class="input-group-addon"
										style="color: rgb(0, 91, 171); font-size: 14px">本校学生</span> <input
										type="text" class="form-control" placeholder="身份证号"
										id="junior_dm" />
								</div>
								<div class="clearfix" style="margin-bottom: 10px;"></div>
								<button type="button" class="btn center-block" id="search1"
									name="search1">查询</button>
							</div>
							<div class="clearfix" style="margin-bottom: 10px;"></div>
							<div class="row">
								<select name="from" class="js-multiselect form-control" size="20"
									multiple="multiple" id="left">

									<option th:if="${studentlist!=null}"
										th:each="studentlist:${studentlist}"
										th:value="${studentlist.sfzh}"
										th:text="${studentlist.sfzh} + '  ' + ${studentlist.xm}+ '  ' + ${studentlist.bjdm}"
										th:attr="data-isUpdate=false">Item 1</option>
								</select>
							</div>
						</div>
						<div class="col-xs-4 text-center ">
							<div class="renxiang_left_box">
								<video id="video" width="430" height="325" autoplay></video>
							</div>
							<!-- 采集到照片放入此区域 -->
							<div id="gatherDiv" class="renxiang_center_box2">
								<img id="gather" src="" />
						  </div>
						</div>
						<div class="col-xs-4 text-center">
						<!-- 图形容器 -->
							<div id="canvasDiv" class="renxiang_center_box">
								<canvas id="canvas" width="270" height="325"></canvas>
							</div>
						</div>
					</div>
					<div></div>

				</div>
			<!-- </form> --> 
			<div class="row text-center">
			   <div class="col-xs-4 "></div>
			   <div class="col-xs-4 "><button id="capture">拍照</button></div>
			   <div class="col-xs-4 "><button onClick="UploadPic();" type="button">保存照片</button></div>
</div>
		</div>
	</div>
</body>

<script src="../js/jquery-3.2.1.min.js"></script>
<script>
    //访问用户媒体设备的兼容方法
    function getUserMedia(constraints, success, error) {
        if (navigator.mediaDevices.getUserMedia) {
            //最新的标准API
            navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
        } else if (navigator.webkitGetUserMedia) {
            //webkit核心浏览器
            navigator.webkitGetUserMedia(constraints,success, error)
        } else if (navigator.mozGetUserMedia) {
            //firfox浏览器
            navigator.mozGetUserMedia(constraints, success, error);
        } else if (navigator.getUserMedia) {
            //旧版API
            navigator.getUserMedia(constraints, success, error);
        }
    };

    let video = document.getElementById('video');
    let canvas = document.getElementById('canvas');
    let context = canvas.getContext('2d');

    //下面的代码是保存canvas标签里的图片并且将其按一定的规则重命名
    //var type = 'png';
    var type = 'jpeg';

    var _fixType = function(type) {
        type = type.toLowerCase().replace(/jpg/i, 'jpeg');
        var r = type.match(/png|jpeg|bmp|gif/)[0];
        return 'image/' + r;
    };
    // 下载后的文件名规则
    var filename = (new Date()).getTime() + '.' + type;

    function success(stream) {
        //兼容webkit核心浏览器
        let CompatibleURL = window.URL || window.webkitURL;
        //将视频流设置为video元素的源
        console.log(stream);

        //video.src = CompatibleURL.createObjectURL(stream);
        video.srcObject = stream;
        video.play();
    };

    function error(error) {
        console.log('访问用户媒体设备失败${error.name}, ${error.message}');
    };

    if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
        //调用用户媒体设备, 访问摄像头
        getUserMedia({video : {width: 390, height:325}}, success, error);
    } else {
        alert('不支持访问用户媒体');
    };

    document.getElementById('capture').addEventListener('click', function () {
        var image = context.drawImage(video, 60, 0, 310, 325,0,0,310,325);

        image.src = canvas.toDataURL("test111.png");
    });

    //上传图片到后台
    function UploadPic() {
        // Generate the image data（将Canvas的内容保存为图片借助toDataURL来实现） 方法返回一个包含图片展示的 data URI 。
        var Pic = document.getElementById("canvas").toDataURL("image/jpg");
        //对其进行base64编 之后的字符串
        Pic = Pic.replace(/^data:image\/(png|jpg);base64,/,"");
        saveFile($("#left").val()+".jpg");
        var ss=$("#left").val();
        // Sending the image data to Server
        $.ajax({
            type:'post',
            url: '/junior/doSavePhoto',
            data: {'imgData': Pic,
            	"sfzh":ss.toString()},
            //async: false,
    		//设置超时 
    		timeout:10000,
            dataType: 'json',
            success: function(data){
                if(data.success){
                    alert('上传成功');
                }else{
                    alert('上传失败');
                }
            },
            error: function(err){
                //alert('网络故障');
            }
        });
    }
    
    /**
     * @param  {String} filename 文件名
     */
    	var saveFile = function(filename){
    	//获取canvas标签里的图片内容
    	var imgData = document.getElementById('canvas').toDataURL(type);
    	imgData = imgData.replace(_fixType(type),'image/octet-stream');
    	
        var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
        save_link.href = imgData;
        save_link.download = filename;
       
        var event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        save_link.dispatchEvent(event);
    };

</script>
</html>
